<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">Products</h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      <a href="/api/products/download" class="btn btn-sm btn-outline-secondary">Export</a>
    </div>
  </div>
</div>

<h2>All Products</h2>

<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of productsListVm.products">
        <td>{{ product.productId }}</td>
        <td>{{ product.productName }}</td>
      </tr>
    </tbody>
  </table>
</div>
